<template>
  <div class="zh-tabs">
    <div class="zh-tabs_warp zh-tabs_scroll">
      <div class="zh-tabs_nav" ref="tabsnav">
        <div class="zh-tab" ref="tabs" v-for="item in tabs" :key="item.id" :class="{ 'isActive': item.id == active }" @click="tabsClick(item,$event)" >
          <span ref="types">{{ item.type }}</span>
        </div>
        <div class="zh-tab__line" :style="lineStyle"></div>
      </div>
    </div>
    <!-- <div class="zh-tabs_content">
      内容
    </div> -->
  </div>
</template>

<script>
export default {
  props: ['tabs'],
  data () {
    return {
      lineStyle: '',
      active: 1
    }
  },
  created () {
  },
  mounted () {
    this.lineStyle = `transform:translateX(${1 * this.$refs.tabs[0].offsetWidth - this.$refs.tabs[0].offsetWidth / 2 + 'px'}) translateX(-50%); width: ${this.$refs.types[0].offsetWidth / 2}px`
  },
  methods: {
    tabsClick (item, e) {
      if (item.isChange) return false
      // scrollWidth 711 滚动条的宽度
      // offsetWidth 414
      // scrollLeft  距离左边的距离
      // console.log(this.$refs.tabsnav.scrollLeft, 'scrollLeft')
      // this.$refs.tabsnav.scrollLeft = (e.currentTarget.offsetLeft + e.currentTarget.offsetWidth - e.currentTarget.offsetWidth / 2) / 2

      // this.$refs.tabsnav.scrollLeft = e.currentTarget.offsetLeft + this.$refs.tabsnav.offsetWidth / 2 - e.currentTarget.offsetWidth

      // console.log(this.$refs.tabsnav.scrollLeft, 'scrollLeft')
      this.lineStyle = `transform: translateX(${e.currentTarget.offsetLeft + e.currentTarget.offsetWidth - e.currentTarget.offsetWidth / 2 + 'px'}) translateX(-50%); width: ${this.$refs.types[item.id - 1].offsetWidth / 2}px`
      this.active = item.id
    }
  }
}
</script>

<style lang="less" scoped >
  .zh-tabs {
    .zh-tabs_warp {
      height: 44px;
      overflow: hidden;
      .zh-tabs_nav {
        height: 100%;
        display: flex;
        background: #fff;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        .zh-tab {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 20px;
          font-size: 14px;
        }
        .zh-tab__line {
          position: absolute;
          bottom: 5px;
          left: 0;
          z-index: 1;
          width: 15px;
          height: 3px;
          background: #ee0a24;
          border-radius: 15px;
          transition-duration: 0.3s;
          transform: translateX(-50%);
        }
        .isActive {
          font-weight: 500;
          color: #323233;
        }
      }
    }
    .zh-tabs_scroll {
      .zh-tab {
        flex: 1 0 auto !important;
        padding: 0 16px;
      }
    }
    // .zh-tabs_content {
    //   margin-top: 20px;
    //   height: 500px;
    // }
  }
</style>
